<template>
  <div class="authority">
    <div style="padding: 1rem;">
      <el-tabs v-model="searchInfo.reportStatus" class="demo-tabs" @tab-click="tabChange">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="已上报" name="1"></el-tab-pane>
        <el-tab-pane label="未上报" name="0"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="行政区划">
          <el-cascader style="width: 100%" :options="areaList" :props="props1" v-model="searchPids"
            @change="searchAreaChange" />
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="searchInfo.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">
            查询
          </el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box unit">
      <div class="gva-btn-list">
        <div class="nums">
          <div class="item">
            <div>单位总数量:</div>
            <div style="color: darkorange;margin-left: 4px;">{{ sbInfo.total }}</div>
          </div>
          <div class="item">
            <div>已上报数量:</div>
            <div style="color: darkorange;margin-left: 4px;">{{ sbInfo.reportNums }}</div>
          </div>
          <div class="item">
            <div>未上报数量:</div>
            <div style="color: darkorange;margin-left: 4px;">{{ sbInfo.notReportNums }}</div>
          </div>
        </div>
        <ExportExcel template-id="api" :limit="9999" />
        <!-- <el-button type="primary" icon="download" @click="exportExcelFunc">导出</el-button> -->
      </div>
      <div class="ant-alert-info">
        <el-popover placement="left-start" :width="350" trigger="click" transition='el-zoom-in-left'>
          <div class="pop-content">
            <div class="pop-title">自定义列</div>
            <div class="check-list">
              <el-checkbox-group v-model="checkedColumns" @change="handleColumnsChange">
                <el-checkbox v-for="column in columns" :value="column" :label="column"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <template #reference>
            <div class="anticon">
              <el-icon size="16" color="#1890ff">
                <Setting />
              </el-icon>
              <div style="margin-left: 2px;">自定义列</div>
            </div>
          </template>
        </el-popover>
      </div>
      <el-table :data="tableData" row-key="id">
        <el-table-column type="index" label="序号" width="100" v-if="checkedColumns.includes('序号')" />
        <el-table-column align="left" label="单位名称" prop="name" v-if="checkedColumns.includes('单位名称')"></el-table-column>
        <el-table-column align="left" label="详细地址" prop="address"
          v-if="checkedColumns.includes('详细地址')"></el-table-column>
        <el-table-column align="left" label="联系人" prop="leader" v-if="checkedColumns.includes('联系人')"></el-table-column>
        <el-table-column align="left" label="联系人电话" prop="contact"
          v-if="checkedColumns.includes('联系人电话')"></el-table-column>
        <el-table-column align="left" label="联系人职务" prop="contactJob"
          v-if="checkedColumns.includes('联系人职务')"></el-table-column>
        <el-table-column align="left" label="状态" v-if="checkedColumns.includes('状态')">
          <template #default="scope">
            <span>{{ scope.row.reportStatus == 0 ? '未上报' : '已上报' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="上报时间" v-if="checkedColumns.includes('上报时间')">
          <template #default="scope">
            <span>{{ formatTimestamps(scope.row.reportedAt) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  getApplicationList
} from '@/api/xitongpeizhi'
import {
  getRegionList,
  unitLists,
  reportNumbers
} from '@/api/unit'
import { formatTimestamps } from '@/utils/format'
import ExportExcel from '@/components/exportExcel/exportExcel.vue'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'

// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()
const activeName = ref('1')
const searchInfo = ref({
  province: '',
  city: '',
  district: '',
  town: '',
  name: '',
  reportStatus: '',
  regionId:''
})

const userStore = useUserStore()
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const yyglForm = ref(null)

const checkedColumns = ref(['序号', '单位名称', '详细地址', '联系人', '联系人电话', '联系人职务', '状态', '上报时间'])

if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).dwsb) {
  checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).dwsb
}
const columns = ref(['序号', '单位名称', '详细地址', '联系人', '联系人电话', '联系人职务', '状态', '上报时间'])
const handleColumnsChange = (val) => {
  let obj = {

  }
  if (localStorage.getItem('columnData')) {
    obj = JSON.parse(localStorage.getItem('columnData'))
  }
  obj.dwsb = val
  localStorage.setItem('columnData', JSON.stringify(obj))
}

const tableData = ref([])
// 查询
const getTableData = async () => {
  const res = await unitLists({
    pageNumber: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value,
    reportStatus:searchInfo.value.reportStatus==''?null:searchInfo.value.reportStatus
  })
  if (res.code == 200) {
    tableData.value = res.result.data
    total.value = res.result.total
  }
}

getTableData()
function tabChange(val) {
  getTableData()
}
const areaList = ref([])
const sbInfo = ref({})
onMounted(() => {
  getRegionList().then(res => {
    areaList.value = res.result
  })
  reportNumbers().then(res => {
    sbInfo.value = res.result
  })
})
const props1 = {
  checkStrictly: true,
  label: 'name',
  value: 'id'
}
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}
const onSubmit = () => {
  page.value = 1
  getTableData()
}
const searchPids = ref([])
const onReset = () => {
  searchInfo.value = {
    province: '',
    city: '',
    district: '',
    town: '',
    name: '',
    reportStatus: '',
    regionId:''
  }
  searchPids.value = []
  getTableData()
}
const searchAreaChange = (val) => {
  searchInfo.value.regionId = val[val.length - 1]
}
</script>

<style lang="scss">
.gva-btn-list {
  display: flex;
  justify-content: space-between;
}

.ant-alert-info {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #1890ff;
  padding: 5px;

  .anticon {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

.nums {
  display: flex;

  .item {
    display: flex;
    margin-right: 20px;
  }
}
</style>
